<template>
	<view class="footer-btn-warp">
		<view v-if="xieyi" class="xieyi">
			<label class="radio" @click="handleClick">
				<radio :checked="isChecked" />
				<text>开通前请确认</text>
			</label>
			<text @click="toNav(`article/article?id=${112}`)">《会员服务协议》</text>
		</view>

		<view v-if="showjiage" class="jiage">
			<view class="lbox">
				<text>共{{ count }}件，退款总金额</text>
				<text>￥{{ jiage }}</text>
			</view>
			<view class="rbox">
				<u-icon
					label="金额明细"
					@click="clickjiage"
					labelPos="left"
					labelSize="28rpx"
					labelColor="#F74E3B"
					:name="zk ? 'arrow-up' : 'arrow-down'"
					color="#2979ff"
					size="30rpx"
					bold
				></u-icon>
			</view>
		</view>

		<view class="footer-btn" :class="{ isTm }" :style="[footerStyle]">
			<view v-if="buy" class="buybox">
				<view class="lbox">
					<view class="ico" @click="toTab('home/home')">
						<image src="@/static/images/foot1.png" mode="aspectFit"></image>
						<text>首页</text>
					</view>
					<view v-if="cart" class="ico" @click="toTab('cart/cart')">
						<u-badge :offset="['-20rpx', '15rpx']" :absolute="true" color="#fff" :value="cartNum"></u-badge>
						<image src="@/static/images/foot2.png" mode="aspectFit"></image>
						<text>购物车</text>
					</view>
				</view>
				<view v-if="cartBtn" class="rboxgwc">
					<button @click="handle(1)">加入购物车</button>
					<button @click="handle(2)">{{ text }}</button>
				</view>
				<view v-else class="rbox">
					<button @click="handle(2)">{{ text }}</button>
				</view>
			</view>

			<view v-else-if="showTotal" class="totalbox">
				<view class="lbox">
					<text>合计应付</text>
					<text>￥{{ total }}</text>
				</view>
				<view class="rbox">
					<button :disabled="disabled" @click="handle(1)">{{ text }}</button>
				</view>
			</view>

			<view v-else-if="twoBtn" class="twoBtnbox">
				<view v-if="jya" class="mask" @click="cmask"></view>

				<button :disabled="jya" @click="handle(1)" :style="[{ borderRadius: `${round}rpx` }, oneStyle]">{{ oneText }}</button>
				<button :disabled="jyb" @click="handle(2)" :style="[{ borderRadius: `${round}rpx` }, twoStyle]">{{ twoText }}</button>
			</view>

			<button v-else :disabled="disabled" @click="handle" :style="[{ borderRadius: `${round}rpx` }, btnStyle]">{{ text }}</button>
		</view>
		<view v-if="footerStyle.position === 'fixed' && cush" style="height: 164rpx"></view>
	</view>
</template>

<script>
import { mapState } from 'vuex';
export default {
	name: 'footer-btn',
	computed: {
		...mapState(['cartNum'])
	},
	props: {
		isTm: {
			type: Boolean,
			default: true
		},
		cush: {
			type: Boolean,
			default: true
		},
		text: {
			type: String,
			default: ''
		},
		isChecked: {
			type: Boolean,
			default: false
		},
		jya: {
			type: Boolean,
			default: false
		},
		jyb: {
			type: Boolean,
			default: false
		},
		showTotal: {
			type: Boolean,
			default: false
		},
		xieyi: {
			type: Boolean,
			default: false
		},
		zk: {
			type: Boolean,
			default: false
		},
		count: {
			type: Number | String,
			default: 0
		},
		showjiage: {
			type: Boolean,
			default: false
		},
		jiage: {
			type: Number | String,
			default: ''
		},
		total: {
			type: Number | String,
			default: ''
		},
		round: {
			type: Number | String,
			default: '40rpx'
		},
		buy: {
			type: Boolean,
			default: false
		},
		cart: {
			type: Boolean,
			default: false
		},
		twoBtn: {
			type: Boolean,
			default: false
		},
		oneText: {
			type: String,
			default: ''
		},
		twoText: {
			type: String,
			default: ''
		},
		cartBtn: {
			type: Boolean,
			default: false
		},
		discounts: {
			type: Number | String,
			default: ''
		},
		disabled: {
			type: Boolean,
			default: false
		},
		btnStyle: {
			default: () => ({
				// background: 'linear-gradient(135deg, #ffe9cc 0%, #f2cea1 100%)'
			}),
			type: Object
		},
		oneStyle: {
			default: () => ({
				// background: 'linear-gradient(135deg, #ffe9cc 0%, #f2cea1 100%)'
			}),
			type: Object
		},
		twoStyle: {
			default: () => ({
				// background: 'linear-gradient(135deg, #ffe9cc 0%, #f2cea1 100%)'
			}),
			type: Object
		},
		footerStyle: {
			default: () => ({ position: 'fixed' }), //sticky or fixed
			type: Object
		}
	},
	data() {
		return { checked: false };
	},
	methods: {
		cmask() {
			this.j_modal('售后已过期');
		},
		handleClick() {
			this.$emit('change');
		},
		clickjiage() {
			this.$emit('clickjiage');
		},
		handle(flag) {
			if (this.cart) {
				this.$emit('submit', flag);
				return;
			}
			if (this.twoBtn) {
				this.$emit('submit', flag);
				return;
			}
			this.$emit('submit');
		}
	}
};
</script>

<style lang="less" scoped>
.isTm {
	background: rgba(255, 255, 255, 0.8) !important;
	backdrop-filter: blur(10rpx) !important; /* 调整模糊程度，例如10px */
}
.mask {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	width: 330rpx;
	height: 80rpx;
	z-index: 999;
}
.footer-btn-warp {
	position: relative;
	.jiage {
		.flex-between();
		width: 100%;
		height: 72rpx;
		padding: 0 32rpx;
		background: #ffffff;
		.lbox {
			display: flex;
			align-items: center;
			text:nth-of-type(1) {
				font-size: 28rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				color: #222222;
			}
			text:nth-of-type(2) {
				font-size: 28rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				color: #f74e3b;
			}
		}
		.rbox {
			display: flex;
			align-items: center;
			.j-active();
			text {
				font-size: 28rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				color: #f74e3b;
			}
		}
	}
	.xieyi {
		position: fixed;
		left: 50%;
		transform: translateX(-50%);
		bottom: 164rpx;
		white-space: nowrap;
		padding: 10rpx;
		label {
			text {
				font-size: 28rpx;
				font-family: Microsoft YaHei-Regular, Microsoft YaHei;
				font-weight: 400;
			}
		}
		& > text {
			font-size: 28rpx;
			font-family: Microsoft YaHei-Regular, Microsoft YaHei;
			font-weight: bold;
		}
	}
}
.footer-btn {
	z-index: 250;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 164rpx;
	// height: 96rpx;
	padding: 8rpx 32rpx;
	background: #ffffff;
	box-shadow: 0rpx -8rpx 20rpx 2rpx rgba(0, 0, 0, 0.06);

	.twoBtnbox {
		position: relative;
		display: flex;
		justify-content: space-between;
		button {
			margin: 0;
		}
		button:nth-of-type(1) {
			width: 330rpx;
			height: 80rpx;
			border-radius: 40rpx 40rpx 40rpx 40rpx;
			border: 2rpx solid #eff1f6;
			background: transparent;

			font-size: 28rpx;
			font-family: Microsoft YaHei-Regular, Microsoft YaHei;
			font-weight: 400;
			color: #666666;
		}
		button:nth-of-type(2) {
			width: 330rpx;
			height: 80rpx;
			background: #e54e4e;
			border-radius: 40rpx 40rpx 40rpx 40rpx;

			font-size: 28rpx;
			font-family: Microsoft YaHei-Regular, Microsoft YaHei;
			font-weight: 400;
			color: #ffffff;
		}
	}
	.totalbox {
		display: flex;
		align-items: center;
		.lbox {
			flex: 1;
			text:nth-of-type(1) {
				font-size: 24rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #222222;
				margin-right: 24rpx;
			}
			text:nth-of-type(2) {
				font-size: 32rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				color: #222222;
			}
		}
		.rbox {
			flex: 1;
			display: flex;
			justify-content: flex-end;
			button {
				margin: 0;
				width: 224rpx;
				height: 80rpx;
				background: #e54e4e;
				border-radius: 40rpx 40rpx 40rpx 40rpx;
				font-size: 28rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #ffffff;
			}
		}
	}
	.buybox {
		display: flex;
		.lbox {
			display: flex;
			.ico {
				position: relative;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				align-items: center;
				padding-right: 32rpx;
				.j-active();
				& > image {
					width: 40rpx;
					height: 40rpx;
					flex-shrink: 0;
				}
				& > text {
					white-space: nowrap;
					margin-top: 6rpx;
					font-size: 20rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #000000;
				}
			}
		}
		.rboxgwc {
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: flex-end;
			button {
				margin: 0;
				font-size: 28rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #ffffff;
			}
			button:nth-of-type(1) {
				width: 259rpx;
				height: 80rpx;
				background: #ffc83b;
				border-radius: 40rpx 0rpx 0rpx 40rpx;
			}
			button:nth-of-type(2) {
				width: 259rpx;
				height: 80rpx;
				background: #e54e4e;
				border-radius: 0rpx 40rpx 40rpx 0rpx;
			}
		}
		.rbox {
			flex: 1;
			display: flex;
			justify-content: flex-end;
			button {
				// width: 518rpx;
				width: 100%;
				height: 80rpx;
				margin: 0;
				background: #e54e4e;
				border-radius: 40rpx;
				font-size: 28rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #ffffff;
			}
		}
	}
	& > button {
		height: 80rpx;
		border-radius: 40rpx 40rpx 40rpx 40rpx;
		margin: 0;
		padding: 0;
		font-size: 28rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #ffffff;

		// background: 'linear-gradient(135deg, #ffe9cc 0%, #f2cea1 100%)'
	}
}
</style>
